<template>
  <!-- 圈子的收费是设置页面 -->
  <view class="main">
    <view class="one">
      <view class="xian"> </view>
      <view class="row">
        <view class="left"> 设置本圈子的加入方式为缴费加入 </view>
        <view class="right">
          <switch @change="switchChange" :checked="is_checked" />
        </view>
      </view>
      <view class="xian"></view>
    </view>
    <view class="two" @tap="prompt">
      <view class="content">
        <view class="left"> 加入圈子的收费金额 ： </view>
        <view class="right"> {{ charge }} 元 </view>
      </view>
    </view>

    <view class="three" @tap="handleShow">
      <view class="content">
        <view class="left"> 收费周期 ： </view>
        <view class="right">
          <text>{{ period }}</text>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <view class="four">
      <view class="title"> 请选择邀请返利模式 : </view>
      <view class="list_">
        <view
          class="item"
          v-for="(item, index) in fenxiaoList"
          :key="index"
          @tap="handleIndex(index)"
        >
          <image
            src="../../imges/weixuan.png"
            mode="aspectFill"
            v-if="!item.is_show"
          ></image>
          <image
            src="../../imges/xuanzhongX.png"
            mode="aspectFill"
            v-if="item.is_show"
          ></image>
          <text>{{ item.item }}</text>
        </view>
      </view>
    </view>

    <view class="two" @tap="prompt1" v-if="activeIndex != 0">
      <view class="content1">
        <view class="left"> 一级佣金比例 : </view>
        <view class="right"> {{ scale }}％ </view>
      </view>
    </view>

    <view class="footer_zhu">
      注：您可获得收费金额的{{
        100 - scale
      }}％，成功邀请他人加入圈子的用户可获得剩余的{{ scale }}％
    </view>

    <view class="bao_btn" @tap="handleSave"> 保存 </view>

    <!-- 收费周期弹窗 -->
    <view class="cycle_set" v-if="is_cycle">
      <view class="content">
        <view class="top">
          <view class="quxiao" @tap="handleQuxiao"> 取消 </view>
          <view class="queding" @tap="handleQueding"> 确定 </view>
        </view>
        <view class="row row1">
          <image
            src="../../imges/xuanzhong1.png"
            mode="aspectFill"
            v-if="is_one"
            @tap="handleOne"
          ></image>
          <image
            src="../../imges/weixuan.png"
            mode="aspectFill"
            v-if="!is_one"
            @tap="handleOne"
          ></image>
          <view class="text"> 一次性收费 </view>
        </view>
        <view class="row">
          <image
            src="../../imges/xuanzhong1.png"
            mode="aspectFill"
            v-if="is_two"
            class="img"
            @tap="handleTwo"
          ></image>
          <image
            src="../../imges/weixuan.png"
            mode="aspectFill"
            class="img"
            v-if="!is_two"
            @tap="handleTwo"
          ></image>
          <view class="text">
            按天数收费
            <input
              type="text"
              :value="input"
              @input="handleInput"
              maxlength="4"
            />
            天
          </view>
        </view>
      </view>
    </view>

    <!-- 收费金额弹窗 -->
    <prompt
      ref="prompt"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
      title="收费金额"
    ></prompt>
    <!-- 分销比例弹窗 -->
    <prompt
      ref="prompt1"
      @onConfirm="onConfirm1"
      @onCancel="onCancel1"
      title="分销比例"
    ></prompt>
  </view>
</template>

<script>
import request from "../../utils/request.js";
import prompt from "../../components/window.vue";
export default {
  data() {
    return {
      is_checked: false,
      is_fee: 0, //是否开启收费
      is_cycle: false, //是否周期弹窗
      is_one: true,
      is_two: false,
      input: "", //文本框值
      period: "设置收费周期",
      charge: "设置收费金额", //收费金额
      scale: "0", //分销比例
      chargeType: 1, //收费类型
      fenxiaoList: [
        {
          item: "无需返利",
          is_show: false,
        },
        {
          item: "一级返利",
          is_show: false,
        },
      ],
      activeIndex: 0,
    };
  },
  components: {
    prompt,
  },
  onLoad(options) {
    this.id = options.id;
    this.getDetail();
    // console.log(options.id)
  },
  methods: {
    handleIndex(index) {
      if (index == 2) {
        uni.showToast({
          title: "二级返利暂未上线",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      this.activeIndex = index;
      this.fenxiaoList.forEach((v) => {
        v.is_show = false;
      });
      this.fenxiaoList[index].is_show = true;
    },
    handleSave() {
      //点击保存事件
      if (this.scale > 50 && this.activeIndex == 1 && this.is_fee == 1) {
        uni.showToast({
          title: "分销比例不可超过50%",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      //正则判断不能为小数
      var rZheng = /^\+?[1-9][0-9]*$/;
      if (
        !rZheng.test(this.scale) &&
        this.activeIndex == 1 &&
        this.is_fee == 1
      ) {
        uni.showToast({
          title: "分销比例不可设置小数",
          duration: 1500,
          icon: "none",
        });
        return false;
      }

      if (this.is_fee == 1 && this.charge == 0) {
        uni.showToast({
          title: "请输入收费金额",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.activeIndex == 0) {
        this.scale = "";
      }
      if (this.charge < 1 && this.is_fee == 1) {
        uni.showToast({
          title: "圈子收费最低1元",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      if (this.charge > 50000 && this.is_fee == 1) {
        uni.showToast({
          title: "圈子收费最高5万元",
          duration: 2000,
          icon: "none",
        });
        return false;
      }

      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/setCirclePay",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.id,
            chargeType: this.chargeType,
            chargeAmount: Number(this.charge),
            chargeCycle: Number(this.input),
            firstDistributionRatio: Number(this.scale),
            secondDistributionRatio: "",
            chargeStatus: this.is_fee,
            isDistribution: this.activeIndex,
          },
        }).then((res) => {
          // console.log(res, '发现圈子')
          if (res.data.code == 200) {
            uni.showToast({
              title: "收费设置成功",
              duration: 1500,
              icon: "none",
            });

            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    getDetail() {
      //获取详情
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/getCirclePayInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.id,
          },
        }).then((res) => {
          // console.log(res, '详情')
          if (res.data.code == 200) {
            this.is_fee = res.data.data.chargeStatus;
            if (res.data.data.chargeStatus == 1) {
              this.is_checked = true;
            } else {
              this.is_checked = false;
              return false;
            }
            this.activeIndex = res.data.data.isDistribution;
            this.fenxiaoList.forEach((v) => {
              v.is_show = false;
            });
            this.fenxiaoList[res.data.data.isDistribution].is_show = true;
            // this.detail = res.data.data
            this.input = res.data.data.chargeCycle;
            this.charge = res.data.data.chargeAmount;
            //this.chargeType = res.data.data.chargeType
            this.scale = res.data.data.firstDistributionRatio; //一级分销

            if (res.data.data.chargeType == 2) {
              this.chargeType = 2;
              this.period = res.data.data.chargeCycle + "天";
              this.is_one = false;
              this.is_two = true;
            } else {
              this.chargeType = 1;
              this.period = "一次性收费";
              this.is_one = true;
              this.is_two = false;
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    switchChange(e) {
      //开关
      if (e.detail.value) {
        this.is_fee = 1;
      } else {
        this.is_fee = 0;
      }
    },
    handleShow() {
      //收费周期弹窗
      this.is_cycle = true;
    },
    handleQuxiao() {
      //取消周期弹窗
      this.is_cycle = false;
    },
    handleQueding() {
      //确定周期弹窗
      if (this.is_one && !this.is_two) {
        this.period = "一次性收费";
        this.is_cycle = false;
      } else {
        if (this.input == "") {
          uni.showToast({
            title: "请填写天数",
            duration: 1500,
            icon: "none",
          });
          return false;
        } else if (!/(^[1-9]\d*$)/.test(this.input)) {
          uni.showToast({
            title: "输入天数格式有误",
            duration: 1500,
            icon: "none",
          });
          return false;
        } else {
          this.period = this.input + "天";
          this.is_cycle = false;
        }
      }
    },
    handleInput(e) {
      //输入框的值
      if (Number(e.detail.value) > 1000) {
        uni.showToast({
          title: "收费周期需低于1000天",
          duration: 1500,
          icon: "none",
        });
      }
      this.input = e.detail.value;
    },
    handleOne() {
      //点第一选项
      this.chargeType = 1;
      if (this.is_one == true) {
        return;
      } else {
        this.is_one = true;
        this.is_two = false;
      }
    },
    handleTwo() {
      //点第二选项
      this.chargeType = 2;
      if (this.is_two == true) {
        return;
      } else {
        this.is_one = false;
        this.is_two = true;
      }
    },
    prompt: function () {
      this.$refs.prompt.show();
    },
    prompt1: function () {
      this.$refs.prompt1.show();
    },
    onConfirm1: function (e) {
      // console.log(e)
      if (e == undefined) {
        e = "";
      }
      if (e.trim() == "") {
        uni.showToast({
          title: "请先输入！",
          duration: 1500,
          icon: "none",
        });
        return;
      } else {
        this.$refs.prompt1.hide();
        this.scale = e.trim();
      }
    },
    onCancel1: function () {
      this.$refs.prompt1.hide();
    },
    onConfirm: function (e) {
      if (e == undefined) {
        e = "";
      }
      let _cost = e.trim();
      if (_cost == "") {
        uni.showToast({
          title: "请先输入！",
          duration: 1500,
          icon: "none",
        });
        return;
      } else {
        this.$refs.prompt.hide();
        this.charge = _cost;
      }
    },
    onCancel: function () {
      this.$refs.prompt.hide();
    },
  },
};
</script>

<style scoped lang="less">
.footer_zhu {
  padding: 0 32rpx;
  padding-top: 8rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2168eb;
  line-height: 37rpx;
}
.main {
  height: calc(100vh - 100rpx);
  width: 100vw;
  background-color: #f9f9f9;
  .cycle_set {
    position: absolute;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100vw;
    height: calc(100vh - 100rpx);
    .content {
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #fff;
      width: 750rpx;
      height: 390rpx;
      .top {
        padding: 33rpx 34rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;
      }
      .row1 {
        padding-top: 70rpx;
        padding-bottom: 30rpx;
        width: 100%;
        border-top: 2rpx solid #ccc;
      }
      .row {
        display: flex;
        align-items: center;
        image {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          margin-right: 47rpx;
          margin-left: 189rpx;
        }

        .img {
          position: relative;
          bottom: -7rpx;
        }

        .text {
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;

          input {
            margin: 0 5rpx;
            padding: 0 4rpx;
            box-sizing: border-box;
            width: 62rpx;
            display: inline-block;
            height: 33rpx;
            border-bottom: 2rpx solid #ccc;
            position: relative;
            bottom: -8rpx;
          }
        }
      }
    }
  }
}

.four {
  background-color: #fff;
  padding: 30rpx 32rpx;

  .title {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .list_ {
    display: flex;
    margin-top: 20rpx;
    // justify-content: space-between;
    align-items: center;

    .item {
      display: flex;
      align-items: center;
      // justify-content: center;
      width: 40%;
      image {
        margin-top: 3rpx;
        width: 34rpx;
        height: 34rpx;
        border-radius: 50%;
        margin-right: 6rpx;
      }

      text {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}

.one {
  background-color: #fff;
  width: 100%;

  .xian {
    background-color: #f9f9f9;
    width: 750rpx;
    height: 20rpx;
  }

  .row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 32rpx;
    align-items: center;
    box-sizing: border-box;
    height: 110rpx;

    .left {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
    }
  }
}

.two {
  background-color: #fff;
  padding: 0 32rpx;

  .content {
    border-bottom: 2rpx solid #eee;
  }

  .content1 {
    border-top: 2rpx solid #eee;
  }

  .content,
  .content1 {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 110rpx;
    box-sizing: border-box;

    .left {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
    }

    .right {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
    }
  }
}

.three {
  background-color: #fff;
  padding: 0 32rpx;

  box-sizing: border-box;

  .content {
    box-sizing: border-box;
    height: 110rpx;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: space-between;
    border-bottom: 2rpx solid #eee;
  }

  .left {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
  }

  .right {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #888888;

    image {
      margin-left: 10rpx;
      height: 30rpx;
      width: 20rpx;
    }
  }
}

.bao_btn {
  width: 466rpx;
  height: 94rpx;
  background: #2168eb;
  border-radius: 47rpx;
  text-align: center;
  line-height: 94rpx;
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin: 162rpx auto;
}
</style>
